{% extends 'news/base_login.html' %}
{% block title %}发布内容{% endblock %}
{% block css %}
{% load static %}
<link rel="stylesheet" href="{% static 'news/css/pub_content.css' %}">
<link rel="stylesheet" href="{% static 'news/css/cropper.min.css' %}">
<link rel="stylesheet" href="{% static 'news/css/ImgCropping.css' %}">
<link rel="stylesheet" href="{% static 'news/assets/design/css/trumbowyg.css' %}">
<!--<script src='http://libs.baidu.com/jquery/1.11.1/jquery.min.js'></script>-->
<script src="{% static 'news/assets/jquery.min.js' %}"></script>
<!--<script src="{% static 'news/assets/trumbowyg.js' %}"></script>-->
<script src="{% static 'news/assets/plugins/base64/trumbowyg.base64.js' %}"></script>

{% endblock %}
{% block content %}
<div style="width:1280px; height:52px; top: 12px; left: 150px; border: 1px solid rgba(96,96,96,0.5); position: relative">
    <div style="display:inline; width:5px; height:50px; background:black; border: 1px solid black; position: absolute"></div>
    <div style="display:inline; top: 23px; left: 17px; background:black; border: 3px solid black; position: absolute"></div>
    <div style="display:inline; top: 15px; left: 28px; position: absolute">发布内容</div>
</div>

<div id="body_2">
			<ul id="ul1">
				<form action="{% url 'news:publish_content' %}" method="post" enctype="multipart/form-data">
					{% csrf_token %}
					<li>内容名称：<input type="text" class="i1 input ii1" name="title"></li>
					<li class="l1">类型：<input type="radio" id="c1" name="sort" class="sort" value="新闻">
					<label for="c1" class="la1 x2"><span class="x1">新闻</span></label>
					<input class="sort" name="type" type="radio" id="c2" value="政策">
					<label for="c2" class="la1 x2"><span class="x1">政策</span></label>
					<input class="sort" name="type" type="radio" id="c3" value="行情">
					<label for="c3" class="la1 x2"><span class="x1">行情</span></label>
					<input class="sort" name="type" type="radio" id="c4" value="技术">
					<label for="c4" class="la1 x2"><span class="x1">技术</span></label></li>
					<li class="l1">作者：<input type="text" class="i2 input" name="author">来源：<input type="text" class="i2 input" name="source"></li>
					<li class="l1">摘要：<input type="text" class="i1 input" name="abstract"></li>
					<li>内容封面：



					<!--图片裁剪框 start-->


						<a id="replaceImg" class="l-btn">更换图片</a>
						<div style="width: 242px;height: 141px;border: solid 1px #555;padding: 5px;margin-top: 10px" class="imgs">
							<img id="finalImg" src="" width="100%" height="100%" >
						</div>

					<div style="display: none" class="tailoring-container">
					    <div class="black-cloth" onclick="closeTailor(this)"></div>
					    <div class="tailoring-content">
					            <div class="tailoring-content-one">
					                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
					                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="images" id="chooseImg" class="hidden" onchange="selectImg(this)">
					                    选择图片
					                </label>
					                <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
					            </div>
					            <div class="tailoring-content-two">
					                <div class="tailoring-box-parcel">
					                    <img id="tailoringImg">
					                </div>
					                <div class="preview-box-parcel">
					                    <p>图片预览：</p>
					                    <div class="square previewImg"></div>
					                    <div class="circular previewImg"></div>
					                </div>
					            </div>
					            <div class="tailoring-content-three">
					                <a class="l-btn cropper-reset-btn">复位</a>
					                <a class="l-btn cropper-rotate-btn">旋转</a>
					                <a class="l-btn cropper-scaleX-btn">换向</a>
					                <a class="l-btn sureCut" id="sureCut">确定</a>
					            </div>
					        </div>
					</div>




					</li>
					<!-- 富文本 -->
					<li>内容：<textarea name="content"  class=" input texts"></textarea></li>
					<!--<li>稿件内容：<input type="hidden" class="sort input texts" name="text"></li>-->
					<!--<li><div id="odiv" style="display:none;position:absolute;z-index:100;">-->
					<!--<img src="{% static 'news/assets/pic/sx.png' %}" title="缩小" border="0" alt="缩小" onclick="sub(-1);"/>-->
					<!--<img src="{% static 'news/assets/pic/fd.png' %}" title="放大" border="0" alt="放大" onclick="sub(1)"/>-->
					<!--<img src="{% static 'news/assets/pic/cz.png' %}" title="重置" border="0" alt="重置" onclick="sub(0)"/>-->
					<!--<img src="{% static 'news/assets/pic/sc.png' %}" title="删除" border="0" alt="删除" onclick="del();odiv.style.display='none';"/>-->
					<!--</div>-->
					<!--<div  onmousedown="show_element(event)" style="clear:both" id="customized-buttonpane" class="editor"></div>-->
					<!--</li>-->
					<li><input type="submit" value="提交" class="tj"></li>




				</form>
			</ul>
		</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
		$('#sureCut').click(function(){
			console.log(11)
			$('#finalImg').css({'display':'block'})
		})
		$('.x2').click(function(){
			b = $('.x2').index(this);
			for(var i in $('.x2')){
				$('.x2')[i].id = ''
			}
			$(this)[0].id = 'pp1'
		})
		<!--$('.tj').click(function(){-->
			<!--console.log(texts = $('#customized-buttonpane').html());-->
			<!--$('.texts')[0].value = texts-->
			<!--console.log($('.texts')[0].value)-->
			<!--for(var i=0;i<$('.input').length;i++){-->
				<!--if($('.input')[i].value.length==0){-->

					<!--alert('请填写所有内容')-->
					<!--return-->
				<!--};-->
			<!--};-->
			<!--$('.tj')[0].type = 'submit';-->
			<!--alert('发布成功')-->

		<!--})-->
	</script>



	<script src="{% static 'news/js/cropper.min.js' %}"></script>
	<script>

	    //弹出框水平垂直居中
	    (window.onresize = function () {
	        var win_height = $(window).height();
	        var win_width = $(window).width();
	        if (win_width <= 768){
	            $(".tailoring-content").css({
	                "top": (win_height - $(".tailoring-content").outerHeight())/2,
	                "left": 0
	            });
	        }else{
	            $(".tailoring-content").css({
	                "top": (win_height - $(".tailoring-content").outerHeight())/2,
	                "left": (win_width - $(".tailoring-content").outerWidth())/2
	            });
	        }
	    })();

	    //弹出图片裁剪框
	    $("#replaceImg").on("click",function () {
	        $(".tailoring-container").toggle();
	    });
	    //图像上传
	    function selectImg(file) {
	        if (!file.files || !file.files[0]){
	            return;
	        }
	        var reader = new FileReader();
	        reader.onload = function (evt) {
	            var replaceSrc = evt.target.result;
	            //更换cropper的图片
	            $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
	        }
	        reader.readAsDataURL(file.files[0]);
	    }
	    //cropper图片裁剪
	    $('#tailoringImg').cropper({
	        aspectRatio: 1/1,//默认比例
	        preview: '.previewImg',//预览视图
	        guides: false,  //裁剪框的虚线(九宫格)
	        autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
	        movable: false, //是否允许移动图片
	        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
	        movable: true,  //是否允许移动剪裁框
	        resizable: true,  //是否允许改变裁剪框的大小
	        zoomable: false,  //是否允许缩放图片大小
	        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
	        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
	        rotatable: true,  //是否允许旋转图片
	        crop: function(e) {
	            // 输出结果数据裁剪图像。
	        }
	    });
	    //旋转
	    $(".cropper-rotate-btn").on("click",function () {
	        $('#tailoringImg').cropper("rotate", 45);
	    });
	    //复位
	    $(".cropper-reset-btn").on("click",function () {
	        $('#tailoringImg').cropper("reset");
	    });
	    //换向
	    var flagX = true;
	    $(".cropper-scaleX-btn").on("click",function () {
	        if(flagX){
	            $('#tailoringImg').cropper("scaleX", -1);
	            flagX = false;
	        }else{
	            $('#tailoringImg').cropper("scaleX", 1);
	            flagX = true;
	        }
	        flagX != flagX;
	    });

	    //裁剪后的处理
	    $("#sureCut").on("click",function () {
	        if ($("#tailoringImg").attr("src") == null ){
	            return false;
	        }else{
	            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
	            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
	            $("#finalImg").prop("src",base64url);//显示为图片的形式

	            //关闭裁剪框
	            closeTailor();
	        }
	    });
	    //关闭裁剪框
	    function closeTailor() {
	        $(".tailoring-container").toggle();
	    }



	</script>
{% endblock %}